document.addEventListener("DOMContentLoaded", function() {
    const bgCircles = document.createElement('div');
    bgCircles.id = 'bg-circles';

    for (let i = 0; i < 5; i++) {
        const circle = document.createElement('div');
        circle.className = 'circle';
        bgCircles.appendChild(circle);
    }

    document.querySelector('.main-content').appendChild(bgCircles);

    // Preview avatar before upload
    const avatarInput = document.getElementById('avatar');
    const avatarPreview = document.getElementById('profile-avatar');

    if (avatarInput) {
        avatarInput.addEventListener('change', function() {
            const file = avatarInput.files[0];
            if (file) {
                const reader = new FileReader();
                reader.onload = function(e) {
                    avatarPreview.src = e.target.result;
                }
                reader.readAsDataURL(file);
            }
        });
    }
});

document.addEventListener("DOMContentLoaded", function() {
    const avatarInput = document.getElementById('avatar');
    const avatarPreview = document.getElementById('profile-avatar');

    if (avatarInput && avatarPreview) {
        avatarInput.addEventListener('change', function() {
            const file = avatarInput.files[0];
            if (file) {
                const reader = new FileReader();
                reader.onload = function(e) {
                    avatarPreview.src = e.target.result;
                }
                reader.readAsDataURL(file);
            }
        });
    }
});
